<template>
  <el-dialog :title="titleMap[mode]" v-model="visible" :width="800" destroy-on-close @closed="$emit('closed')">
    <el-form :model="form" :disabled="mode == 'show'" ref="dialogForm" label-width="100px">
      <el-form-item label="数据表名称" prop="name">
        <el-select v-model="value" filterable placeholder="请选择">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="字段名称" prop="field">
        <scFilterBar filterName="filterName" :options="options2" @filterChange="change">
        </scFilterBar>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="visible = false">取 消</el-button>
      <el-button v-if="mode != 'show'" type="primary" :loading="isSaveing" @click="submit()">提 交</el-button>
    </template>
  </el-dialog>
</template>

<script>
import scFilterBar from '@/components/scFilterBar_add';
import * as index from './../../../api/model/table'
export default {
  emits: ['success', 'closed'],
  components: {
    scFilterBar
  },
  data() {
    return {
      val: 1,
      options2: [
        {
          label: 'ID',
          value: 'id',
          type: 'text',
          selected: true,
          placeholder: '请输入ID号'
        },
        {
          label: '类型',
          value: 'type',
          type: 'select',
          operator: '=',
          selected: true,
          placeholder: '请选择类型',
          extend: {
            data: [
              {
                label: "选项1",
                value: "1"
              },
              {
                label: "选项2",
                value: "2"
              }
            ]
          }
        },
        {
          label: '类型(多选)',
          value: 'type2',
          type: 'select',
          operator: '=',
          placeholder: '请选择类型',
          extend: {
            multiple: true,
            data: [
              {
                label: "选项1",
                value: "1"
              },
              {
                label: "选项2",
                value: "2"
              }
            ]
          }
        },
        {
          label: '通知(异步)',
          value: 'noticeType',
          type: 'select',
          operator: '=',
          placeholder: '请选择通知类型',
          extend: {
            request: async () => {
              var list = await this.$API.system.dic.get.get()
              return list.data.map(item => {
                return {
                  label: item.label,
                  value: item.value
                }
              })
            }
          }
        },
        {
          label: '通知(远程搜索)',
          value: 'noticeType2',
          type: 'select',
          operator: '=',
          placeholder: '请输入关键词后检索',
          extend: {
            remote: true,
            request: async (query) => {
              var data = {
                keyword: query,
              }
              var list = await this.$API.system.dic.get.get(data)
              return list.data.map(item => {
                return {
                  label: item.label,
                  value: item.value
                }
              })
            }
          }
        },
        {
          label: '关键词(标签)',
          value: 'tags',
          type: 'tags',
          operator: 'include',
          operators: [
            {
              label: '包含',
              value: 'include',
            },
            {
              label: '不包含',
              value: 'notinclude',
            }
          ]
        },
        {
          label: '开关(可重复)',
          value: 'switch',
          type: 'switch',
          repeat: true,
          operator: '='
        },
        {
          label: '日期单选',
          value: 'date',
          type: 'date',
          operator: '=',
          operators: [
            {
              label: '等于',
              value: '=',
            },
            {
              label: '不等于',
              value: '!=',
            }
          ]
        },
        {
          label: '日期范围',
          value: 'date2',
          type: 'daterange'
        },
        {
          label: '自定义日期',
          value: 'date3',
          type: 'customDate',
          placeholder: '请选择月份',
          extend: {
            dateType: 'month',
            valueFormat: 'YYYY-MM'
          }
        }
      ],
      mode: "add",
      titleMap: {
        add: '新增',
        edit: '编辑',
        show: '查看'
      },
      visible: false,
      isSaveing: false,
      //表单数据
      form: {
        id: "",
        name: "",
        field: ""
      },
      //所需数据选项
      groups: [],
      groupsProps: {
        value: "id",
        emitPath: false,
        checkStrictly: true
      },
      options: [],
      filterData: {},
      defaultFilter: [],
      value: ''
    }
  },
  mounted() {

  },
  created() {
    this.table();
  },
  methods: {
    table() {
      index.table().then((response) => {
        for (this.val; this.val <= response.data.data.length; this.val++) {
          var temp = { "value": this.val, "label": response.data.data[this.val - 1].description }
          this.options.push(temp);
        }
      }).catch(function (error) {
        console.log(error)
      })
    },
    change(data) {
      this.filterData = data;
    },
    //显示
    open(mode = 'add') {
      this.mode = mode;
      this.visible = true;
      return this
    },
    //表单提交方法
    async submit() {
      var valid = await this.$refs.dialogForm.validate().catch(() => { })
      if (!valid) {
        return false
      }
      this.isSaveing = true;
      var res = await this.$API.demo.post.post(this.form);
      this.isSaveing = false;
      if (res.code == 200) {
        if (this.mode == 'add') {
          this.form.id = res.data
        }
        this.$emit('success', this.form, this.mode)
        this.visible = false;
        this.$message.success("操作成功")
      } else {
        this.$alert(res.message, "提示", { type: 'error' })
      }
    },
    //表单注入数据
    setData(data) {
      this.form.id = data.id
      this.form.name = data.name
      this.form.field = data.field
      //可以和上面一样单个注入，也可以像下面一样直接合并进去
      //Object.assign(this.form, data)
    }
  }
}
</script>

<style></style>
